<template>
  <div class="container">

    <van-nav-bar class="bav" fixed>
      <template #left>
        <div class="title-box">
          <div class="hello">中午好</div>
          <div class="username-box">
            <div class="login-text" v-if='!isLogin' @click="gotoPage('login')">登录</div>
            <div class="username" v-else>{{ username }}</div>
          </div>
        </div>
      </template>
      <template #right>
        <van-search shape="round" placeholder="请输入搜索关键词" @focus="gotoPage('Search')" />
      </template>
    </van-nav-bar>


    <div>
      <van-swipe indicator-color="rgb(186, 186, 186)" :autoplay="3000">
        <van-swipe-item v-for="(item, index) in bannerData" :key="index">
          <div @click="viewProductDetail(item.pid)">
            <img class="auto-img" :src="item.bannerImg" alt="" />
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="hot-pro">
      <div class="hot-pro-item" v-for="(item, index) in productData" :key="index">
        <Product :pro="item" />
      </div>
    </div>

    <navigationBar :iNum="itemNum" />
  </div>
</template>


<script setup lang="ts">

// import axios from "axios";
import Product from "../components/Product.vue";

import navigationBar from "../components/navigationBar.vue";
import { goodList, queryBanner2, getUser } from '@/api/index';
import { useRouter } from "vue-router"


let router: any = useRouter();

let itemNum = ref<string>("0")
//轮播图数据
let bannerData: any = ref<Array<any>>([]);

let productData: any = ref<Array<any>>([]);

let username: any = ref<string>("");

let isLogin: any = ref<boolean>(false);

//获取用户信息
let getUserInfo: () => void = (): void => {
  getUser().then((result: any): void => {

    if (result.data.code === "A001") {
      username.value = result.data.result[0].nickName;
      isLogin.value = true;
    }
  })
    .catch((err: any): void => {
      console.log(err);

    });
};

//查看商品详情
let viewProductDetail: (pid: string) => void = (pid: string): void => {
  router.push({ name: "Detail", params: { pid } });
};


function gotoPage(name: string): void {
  router.push({ name });
}
queryBanner2().then((result) => {
  if (result.data.code === 300) {
    bannerData.value = result.data.result;
  }
})

goodList({
  key: "isHot",
  value: "1",
}).then((result) => {
  if (result.data.code === 500) {
    productData.value = result.data.result;
  }
})


// getHotProduct()

onMounted(() => {
  getUserInfo();
})



</script>

<style lang="less" scoped>
.container {
  padding-top: 46px;
  padding-bottom: 50px;


  .auto-img {
    width: 100%;
    display: block;
  }

  .bav {
    width: 100%;
    height: 13.4vw;
  }

  .title-box {
    width: 102px;

    height: 54px;
    // background-color: aqua;
    display: flex;
    align-items: center;

    .hello {
      width: 60px;
      // flex: 1;
    }

    .username-box {
      width: 40px;
      font-weight: 700;
      // flex: 1;
      // .login-text {

      // }
      .username {

        font-weight: bold;
        color: #0C34BA;
        overflow: hidden;
        white-space: nowrap;
        // overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .hot-pro {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    background-color: rgb(242, 242, 242);

    .hot-pro-item {
      overflow: hidden;
      // position: relative;
      background-color: rgb(255, 255, 255);
      border-radius: 5px;
      width: calc(~"50% - 5px");
      margin-bottom: 10px;
      margin-right: 10px;

      &:nth-child(2n) {
        margin-right: 0;
      }
    }
  }


}
</style>
